import React, { Suspense, useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import ThemeContext from '../store/context';

const Signin = React.lazy(() => import('./Signin'));
const Signup = React.lazy(() => import('./Signup'));
const Layout = React.lazy(() => import('../layout'));
const Coupon = React.lazy(() => import('./Coupon'));
const Hook = React.lazy(() => import('./Hooks/demo.js'));

const RenderApp = (router) => {
  // const token = localStorage.getItem('__token__');

  // if (!token) return router.history.push('/signin');

  return (
    <Layout>
      <Switch>
        <Route path="/home">
          div
        </Route>
        <Route path="/coupon" component={Coupon} />
        <Route path="/hook" component={Hook} />
      </Switch>
    </Layout>
  );
}

const App = () => {
  const [context, setContext] = useState({
    name: '杨海江',
  });

  useEffect(() => {
    setTimeout(() => {
      setContext({
        name: '任浩杰',
      });
    }, 3000);
  }, []);

  return (
    <ThemeContext.Provider value={context}>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/signin" component={Signin} />
          <Route path="/signup" component={Signup} />
          <Route path="/" render={RenderApp} />
        </Switch>
      </Suspense>
    </ThemeContext.Provider>
  );
}

export default App;
